<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形菜单</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--animate:true:折叠展开的动画效果-->
    <!--ines:true:定义是否显示树线条-->
    <ul class="easyui-tree" data-options="animate:true,lines:true">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>
            <span>菜单3</span>
            <ul>
                <li>菜单3-1</li>
                <li>菜单3-2</li>
            </ul>
        </li>
    </ul>

    <hr/>

    <ul id="tree2">

    </ul>


    <!--声明一个菜单,用于绑定到tree的右键-->
    <div id="mm" class="easyui-menu" style="width: 120px;" >
        <div onclick="appendNode()" data-options="iconCls:'icon-add'" >Append</div>
        <div onclick="insertNode()" data-options="iconCls:'icon-back'" >Insert</div>
        <div onclick="removeNode()" data-options="iconCls:'icon-remove'" >Remove</div>
    </div>

    <hr/>
    <ul id="tree3" >
        
    </ul>

    <input type="button" value="全选中" onclick='alertNodes($("#tree3").tree("getChecked"))' />
    <input type="button" value="半选中" onclick='alertNodes($("#tree3").tree("getChecked","indeterminate"))' />
    <input type="button" value="全选和半选中" onclick='alertNodes($("#tree3").tree("getChecked",["checked","indeterminate"]))' />
    <input type="button" value="未选中" onclick='alertNodes($("#tree3").tree("getChecked","unchecked"))' />


    <hr/>

    <ul id="tree4" >
        
    </ul>

    <script>

        function alertNodes(nodes){

            var texts=new Array();
            var ids=[];

            //遍历
            $(nodes).each(function(index,node){
                texts[index]=node.text;
                ids[index]=node["id"];
            });


            alert(texts.join(','));
            alert(ids.join(','));

        }


        $(function(){

            $('#tree4').tree({
                checkbox:true,
                lines:true,
                animate:true,
                url:'data.json',
                method:'get'
            });
            
            //state:'closed':state：节点状态，'open'(展开) 或 'closed'(关闭)，默认是 'open'。
            $('#tree2').tree({
                data:[
                    {text:'Item1',id:1000},
                    {text:'Item2',id:2000},
                    {text:'Item3',id:3000,state:'closed',children:[{text:'Item3-1',id:4000},{text:'Item3-2',id:5000},{text:'Item3-3',id:6000}]}   
                ],
                formatter:function(node){   //    node:代表当前树节点
                    //console.log(node);
                    return "["+node.text+","+node.id+"]";
                },
                loadFilter:function(data){   //loadFilter:过滤想要的数据
                    //console.log(data);
                    
                    for(var i=0;i<data.length;i++){

                        console.log(data[i].text);

                        if(data[i].text=="Item2"){  //给文本为Item2的加图标
                            //console.log('1111111111');
                            //data[i].iconCls="icon-save";
                            data[i].text="哈哈哈";
                        }
                    }
                    
                    return data;
                },
                onClick:function(node){ //点击事件
                        //alert(node.text+","+node.id);
                        //console.log(node.target);//目标的DOM对象
                        $(this).tree('beginEdit',node.target);  //beginEdit:开始编辑节点
                },
                onAfterEdit:function(node){  //编辑节点后触发的事件
                    //编辑成功后:
                    //console.log(node);
                    console.log(node.text);
                    alert(node.text);

                    //这里新增加的节点id由数据生成
                    //这里可以用ajax提交到后台

                },
                onContextMenu:function(e,node){ //将菜单绑定到树上,e:当前事件,node:节点参数
                    //因为浏览器是有默认的右键事件的
                    e.preventDefault();//阻止浏览器的默认右键事件
                    //选中当前右键点击的节点
                    $(this).tree('select',node.target);
                    //显示菜单,并设置菜单的位置
                    $('#mm').menu("show",{
                        left:e.pageX,
                        top:e.pageY
                    });
                },
                dnd:true, //设置成可拖拽的树
                onDrop:function(target,source,point){  //当节点被拖拽放置时触发
                    //target：DOM 对象，放置的目标节点。
                    //source：源节点(被拖拽的节点)。
                    //point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。

                    alert(source.text);
                    //getNode:获取指定节点对象
                    alert($(this).tree("getNode",target).text);
                }           
            });



            $('#tree3').tree({
                data:[
                    {text:'Item1',id:1000},
                    {text:'Item2',id:2000},
                    {text:'Item3',id:3000,state:'closed',children:[{text:'Item3-1',id:4000},{text:'Item3-2',id:5000},{text:'Item3-3',id:6000}]}   
                ],
                checkbox:true, //带复选框的tree
                lines:true,
                animate:true,
                //cascadeCheck:false,  //定义是否级联检查,选择父节点下面的子节点是否被全选,反之选中所有子节点,是否会选中父节点
                //onlyLeafCheck:true   //定义是否只在叶节点前显示复选框
            });


        });


        var id=0;

        //添加到右键选中节点的子节点
        function appendNode(){
         
            //获取当前选中的节点
            var selected=$('#tree2').tree("getSelected");

            //console.log(selected);

            //创建一个新的节点
            var node={
                parent:selected.target, //指定新节点的父节点
                data:[{      //指定节点的相关属性
                    id:++id,
                    text:'',
                }]
            };

           //节点追加到tree中
           $('#tree2').tree("append",node);
           
           //find:通过id,查找到节点
            node=$('#tree2').tree("find",id);
           //让节点进入可编辑状态
            $("#tree2").tree("beginEdit",node.target);
        }


        //插入右键选中节点的兄弟节点
        function insertNode(){
            var selected=$('#tree2').tree("getSelected");

              //创建一个新的节点
              var node={
                    id:++id,
                    text:'',
                };

            $('#tree2').tree('insert',{
                //before：DOM 对象，前边插入的节点。
                //after：DOM 对象，后边插入的节点。
                after:selected.target, //指定在选中节点之后插入新节点
                data:node   //插入的节点
            });

            //find:通过id,查找到节点
            node=$('#tree2').tree('find',id);
            //让当前节点进入可编辑状态
            $('#tree2').tree('beginEdit',node.target);

        }

        //删除节点
        function removeNode(){

             //获取当前选中的节点
             var selected=$('#tree2').tree("getSelected");
            //remove方法,删除选中的节点
             $('#tree2').tree("remove",selected.target);
        }

       
    </script>
</body>
</html>